<template>
  <button v-loading="loading" @click="changeLoading">局部loading</button>

  <button
    style="margin-left: 30px"
    v-loading:[loadingDymic].fullScreen="loading1"
    @click="changeLoading1"
  >
    全局loading
  </button>

  <input
    type="color"
    style="margin-left: 20px"
    v-model="inputVal"
    placeholder="请选择全局loading的背景色值"
  />
</template>
<script setup>
import { ref, computed } from "vue";
const loading = ref(false);
const loading1 = ref(false);
const inputVal = ref("rgba(0, 0, 0)");

const loadingDymic = computed(() => {
  return {
    bg: inputVal.value,
  };
});

const changeLoading1 = () => {
  loading1.value = true;
  setTimeout(() => {
    loading1.value = false;
  }, 5000);
};

const changeLoading = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1500);
};
</script>
